<template>
  <el-scrollbar class="vui-side-bar relative" :class="{ 'is-collapse': collapse, 'side-bar-common': layout === 'common' }">
    <vui-logo v-if="layout === 'vertical' || layout === 'comprehensive' || layout === 'float'" />
    <div class="px-4 absolute top-0 left-0 z-2 w-full">
      <VuiInputSearch
        v-if="!getCollapse"
        :items="list"
        :min-input-length="1"
        :placeholder="translateTitle('Base.baseAdmin.搜索关键字')"
        @selectItem="selectItem"
      />
    </div>

    <el-menu
      :active-text-color="variables['menu-color-active']"
      :background-color="variables['menu-background']"
      :collapse="collapse"
      :collapse-transition="false"
      :default-active="activeMenu"
      :default-openeds="defaultOpeneds"
      menu-trigger="click"
      mode="vertical"
      style="margin-top: 28px"
      :text-color="variables['menu-color']"
      :unique-opened="uniqueOpened"
    >
      <template v-for="(route, index) in handleRoutes">
        <vui-menu v-if="route.meta && !route.meta.hidden" :key="index + route.name" :item="route" />
      </template>
    </el-menu>
    <div class="flex items-center menu-bottom-fold justify-center" :style="[{ width: !getCollapse ? '200px' : '56px' }]">
      <vui-fold v-if="layout === 'common'" />
    </div>
  </el-scrollbar>
</template>

<script>
  import { translateTitle } from '@/utils/i18n'
  import { computed, defineComponent, ref, watch, watchEffect } from 'vue'
  import { useStore } from 'vuex'
  import { useRoute } from 'vue-router'
  import { handleActivePath, handleMatched } from '@/utils/routes'
  import { defaultOpeneds, uniqueOpened } from '@project/config'
  import variables from '@/vui/styles/variables/variables.scss'

  import { useInputSearch } from './useInputSearch'
  export default defineComponent({
    name: 'VuiSideBar',
    props: {
      layout: {
        type: String,
        default: 'vertical',
      },
    },
    setup(props) {
      const store = useStore()
      const route = useRoute()

      const extra = computed(() => store.getters['settings/extra'])
      const routes = computed(() => store.getters['routes/routes'])
      const activeName = computed(() => store.getters['routes/activeName'])
      const collapse = computed(() => store.getters['settings/collapse'])

      const activeMenu = ref()
      const handleRoutes = computed(() =>
        props.layout === 'comprehensive'
          ? handlePartialRoutes()
          : routes.value.flatMap((_route) => (_route.meta && _route.meta.levelHidden === true && _route.children ? _route.children : _route))
      )
      // handleRoutes.value.filter((route) => route.meta && !route.meta.hidden)

      const handlePartialRoutes = () => {
        const activeMenu = routes.value.find((_route) => _route.name === extra.value.first)
        return activeMenu ? activeMenu.children : []
      }

      watchEffect(() => (activeMenu.value = handleActivePath(route)))

      watch(
        () => activeName.value,
        (val) => {
          const matched = handleMatched(routes.value, val)
          extra.value.first = matched[0].name
          activeMenu.value = matched[matched.length - 1].path
        }
      )
      const getCollapse = computed(() => store.getters['settings/collapse'])

      //搜索功能
      const { list, selectItem } = useInputSearch(handleRoutes.value)

      return {
        translateTitle,
        routes,
        collapse,
        variables,
        activeMenu,
        handleRoutes,
        uniqueOpened,
        defaultOpeneds,
        getCollapse,
        //菜单搜索相关
        list,
        selectItem,
      }
    },
  })
</script>

<style lang="scss" scoped>
  @mixin active {
    &:hover {
      color: var(--el-color-white);
      background-color: var(--vui-menu-active);
    }

    &.is-active {
      color: var(--el-color-white);
      background-color: var(--vui-menu-active);
    }
  }

  .vui-side-bar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: $base-z-index + 1;
    width: $base-left-menu-width;
    height: 100vh;
    overflow: hidden;
    background: linear-gradient(180deg, #3a486a, #24314d);
    box-shadow: $base-box-shadow;
    transition: $base-transition;
    padding-bottom: 40px;

    &.side-bar-common {
      top: $base-header-height;
      height: calc(100vh - #{$base-header-height});
    }

    &.is-collapse {
      width: $base-left-menu-width-min;
      border-right: 0;

      :deep() {
        .el-menu--collapse.el-menu {
          > .el-menu-item,
          > .el-sub-menu {
            text-align: center;

            .el-tag {
              display: none;
            }
          }
        }

        .el-menu-item,
        .el-sub-menu {
          text-align: left;
        }

        .el-menu--collapse {
          border-right: 0;

          .el-sub-menu__icon-arrow {
            right: 10px;
            margin-top: -3px;
          }
        }
      }
    }

    :deep() {
      .el-scrollbar__wrap {
        overflow-x: hidden;
      }

      .el-menu-item,
      .el-sub-menu__title {
        height: $base-menu-item-height;
        overflow: hidden;
        line-height: $base-menu-item-height;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: middle;

        font-size: 13px;
        i {
          color: inherit;
        }
      }

      .el-menu-item {
        font-size: 12px;
        @include active;
      }
    }
  }
  .menu-bottom-fold {
    background-color: #19243c;
    color: #fff;
    position: fixed;
    bottom: 0;
    width: 200px;
  }
</style>

<!--由于element-plus
bug使用popper-append-to-body=false会导致多级路由无法显示，故所有菜单必须生成至body下，样式必须放到body下-->
<style lang="scss">
  @mixin menuActiveHover {
    &:hover,
    &.is-active {
      i {
        color: var(--el-color-white);
      }

      color: var(--el-color-white);
      background: var(--el-color-primary);

      .el-sub-menu__title {
        i {
          color: var(--el-color-white);
        }

        color: var(--el-color-white);
        background: var(--el-color-primary);
      }
    }
  }

  .el-menu {
    border-right: 0;
  }

  .el-popper {
    .el-menu--vertical {
      .el-menu-item,
      .el-sub-menu {
        height: $base-menu-item-height;
        line-height: $base-menu-item-height;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: middle;
        @include menuActiveHover;

        i {
          color: inherit;
        }

        .el-sub-menu__title {
          height: $base-menu-item-height;
          line-height: $base-menu-item-height;
          text-overflow: ellipsis;
          white-space: nowrap;
          vertical-align: middle;
          @include menuActiveHover;
        }
      }
    }
  }
</style>
